/****************
 *@description: 定位器解绑
 *@author: Xhd
 *@date: 2023-10-17 13:59:51
 *@version: V1.0.0
*************************************************************************/

import React, { Component } from 'react';
import { Input, Button, Divider, Space, PageHeader } from "antd";
import { untieDeviceToolApi, checkPetGpsApi } from '@/request/auxiliaryTools';
import TheQueryForm from '@/components/TheQueryForm';
import TheTable from "@/components/TheTable";
import "./style.less";
import _ from "lodash";

export default class Locators extends Component {
  constructor() {
    super()
    this.queryFormRef = React.createRef()
    this.state = {
      columns: [
        {
          title: "日期时间",
          dataIndex: "timestamp",
          key: "timestamp",
        },
        {
          title: "坐标",
          dataIndex: "gdLngLat",
          key: "gdLngLat",
        }
      ],
      dataSource: [],
      searchOption: [
        { field: 'sn', label: '设备SN码', placeholder: '请输入设备SN码', required: false, rules: [], type: 'Input', defaultValue: '' },
      ],
      snCodes: []
    }
  }

  componentDidMount() {

  }
  getUntieSN(e) {
    let SNs = e.target.value.split(',')
    this.setState({
      snCodes: e.target.value ? SNs : []
    })
  }

  untiePetGps() {
    const { snCodes } = this.state
    if(!_.isEmpty(snCodes)) {
      untieDeviceToolApi(snCodes).then(res=>{
        if(res.code === 0 && res.data){
          React.$message({
            type: "success",
            content: "解绑成功"
          })
        }else {
          React.$message({
            type: "error",
            content: "解绑失败"
          })
        }
      })
    }else {
      React.$message({
        type: "warning",
        content: "请输入设备SN码"
      })
    }
  }

  getPetGps(values) {
    if(values) {
      checkPetGpsApi(values).then(res=>{
        if(res.code === 0 && !_.isEmpty(res.data.history)) {
          this.setState({
            dataSource: res.data.history
          })
        }else if(res.code === 0 && _.isEmpty(res.data.history) ) {
          React.$message({
            type: "warning",
            content: "该定位器没有定位数据"
          })
        }
      })
    }else {
      this.setState({
        dataSource: []
      })
    }
  }

  render() {
    const { columns, dataSource, searchOption, } = this.state
    return <div className={"p-layout-box configuration"}>
      <div className='untie model'>
        <PageHeader title="定位器解绑" />
        <div style={{ color: '#ef0000', fontSize: '12px', marginBottom: '20px' }}>
          定位器解绑功能：支持单设备解绑，批量解绑。<br />
          批量解绑设备多SN码之间需用“,”隔开，“,”为英文输入格式
        </div>
        <div style={{ width: "40%" }}>
          设备SN码：
          <Space>
            <Input placeholder='请输入设备SN码' allowClear onChange={(e)=>this.getUntieSN(e)} />
            <Button type='primary' onClick={()=>{this.untiePetGps()}} >解绑</Button>
          </Space>
        </div>

      </div>
      <Divider></Divider>
      <div className='search model'>
        <PageHeader title="定位器数据查询" />
        <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={true} option={searchOption}
          onReset={() => this.getPetGps()}
          onGetValues={(values) => this.getPetGps(values)} >
        </TheQueryForm>
        <TheTable
          scroll={{ x: "max-content", y: '63vh' }}
          columns={columns}
          dataSource={dataSource}
        />
      </div>
    </div>
  }
}
